<template>
	<view class="content">
		<up-form :model="formData" ref="uFormRef" :rules="rules">
			<up-form-item label="班级" prop="class">
				<uni-data-picker :localdata="items" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"
					v-model="formData.class" class="uniDataPickerStyle"></uni-data-picker>
			</up-form-item>

			<up-form-item label="单选项" prop="optvalue">
				<MySelect v-model="formData.optvalue" :localdata='singleData' />
			</up-form-item>
			<up-form-item label="多选项" prop="morevalue">
				<MySelect v-model="formData.morevalue" :localdata='moreData' :multiple="true" />
			</up-form-item>
			<up-form-item label="手机号" prop="phone">
				<up-input placeholder="请输入手机号" border="surround" v-model="formData.phone"></up-input>
			</up-form-item>

		</up-form>
		<view>
			<up-button @click="submit" type="primary">提交</up-button>
		</view>
		<TimeStep />
	</view>
</template>
<script setup>
	import MySelect from '../../components/MySelect.vue'
	import TimeStep from '../../components/TimeStep.vue'
	import { ref } from 'vue'
	const value1 = ref('')
	const uFormRef = ref(null)
	const formData = ref({
		class: '',
		love: '',
		phone: ''
	})
	const singleData = ref([{
			'value': 1,
			'text': '单选'
		},
		{
			'value': 2,
			'text': '单选1'
		},
		{
			'value': 3,
			'text': '单选2'
		},
		{
			'value': 4,
			'text': '单选3'
		},
		{
			'value': 5,
			'text': '单选4'
		},
		{
			'value': 6,
			'text': '单选5'
		},
	])
	const moreData = ref([{
			'value': 1,
			'text': '多选'
		},
		{
			'value': 2,
			'text': '多选1'
		},
		{
			'value': 3,
			'text': '多选2'
		},
		{
			'value': 4,
			'text': '多选3'
		},
		{
			'value': 5,
			'text': '多选4'
		},
		{
			'value': 6,
			'text': '多选5'
		},
	])
	const rules = {
		class: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		love: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		fileList1: [{
			type: 'array',
			required: true,
			message: '请选择附件',
			trigger: ['change', 'blur'],
		}],
		phone: [{
				required: false,
				message: '请输入手机号',
				trigger: ['blur', 'change'],
			},
			{
				pattern: /^1[3-9]\d{9}$/,
				// 正则检验前先将值转为字符串
				transform(value) {
					return String(value)
				},
				message: '请输入正确的手机号',
			},
		]
	}

	const items = ref([{
			text: '一年级',
			value: '1-0',
			children: [{
					text: '1.1班',
					value: '1-1'
				},
				{
					text: '1.2班',
					value: '1-2',
					children: [{
							text: '1.2.1班',
							value: '1-2-1',
						},
						{
							text: '1.2.2班',
							value: '1-2-2',
						},
						{
							text: '1.2.3班',
							value: '1-2-3',
						}
					]
				},
			]
		},
		{
			text: '二年级',
			value: '2-0'
		},
		{
			text: '三年级',
			value: '3-0'
		}
	])



	// 提交方法
	// function submit() {
	// 	let flag = false
	// 	uFormRef.value
	// 		.validate()
	// 		.then(valid => {
	// 			console.log(valid)
	// 			if (valid) {
	// 				flag = formData.value
	// 				uni.$u.toast('校验通过')
	// 			} else {
	// 				uni.$u.toast('校验失败')
	// 			}
	// 		}).catch(() => {
	// 			// 处理验证错误  
	// 			uni.$u.toast('校验失败')
	// 		})
	// 	return flag
	// }
	function submit() {
		uFormRef.value
			.validate()
			.then(valid => {
				console.log(valid)
				if (valid) {
					resolve(formData.value)
					uni.$u.toast('校验通过')
				} else {
					uni.$u.toast('校验失败')
				}
			}).catch(() => {
				resolve('校验失败')
				// 处理验证错误  
				uni.$u.toast('校验失败')
			})
	}
</script>
<style scoped lang="scss">
	.uniDataPickerStyle {
		:deep(.input-value) {
			border: none;
		}

		:deep(.selected-list) {
			justify-content: flex-end;
		}

		:deep(.selected-area) {
			justify-content: flex-end;
		}


	}

	.uniDataSelectStyle {
		:deep(.uni-select) {
			border: none
		}

		:deep(.uni-select__input-text) {
			text-align: right;
		}
	}

	.content {
		:deep(.u-form-item__body__right__message) {
			text-align: right
		}
	}
</style>